<template>
  <div class="content">
    <h4>选择客户类型</h4>
    <div>
      <a-radio-group defaultValue="A" size="large" @change="onChange">
        <a-radio-button value="A">企业、个体工商户</a-radio-button>
        <!-- <a-radio-button style="margin-left: 50px;" value="B">&emsp;&emsp;小微商户&emsp;&emsp;</a-radio-button> -->
      </a-radio-group>
    </div>
    <div v-if="isshow" class="orgClass">
      <h5>您需要准备以下材料：</h5>
      <p>
        1、填写完整的《特约商户服务协议》一式两份，用公章/合同章加盖尾章和骑缝章；
        <a
          href="javascript:false;void(0);"
          @click="getFileDownload('merchant_service')"
          >特约商户服务协议</a
        >
      </p>
      <p>2、营业执照复印件加盖公章一份；</p>
      <p>3、法定代表人身份证正面和背面复印到一张A4纸上加盖公章一份；</p>
      <p>
        4、结算银行账户（对公账户证明或对私银行卡正面和背面）复印到一张A4纸上加盖公章一份；
      </p>
      <p>
        5、经营场所照片，包括：门头/LOGO照片、前台/收银台照片、办公/营业照片；
      </p>
      <p class="tipReg">{{ tipReg }}</p>
    </div>
    <div v-if="!isshow" class="orgClass">
      <h5>您需要准备以下材料：</h5>
      <p>
        1、填写完整的《特约商户服务协议》一式两份；
        <a
          href="javascript:false;void(0);"
          @click="getFileDownload('merchant_service')"
          >特约商户服务协议</a
        >
      </p>
      <p>2、申请人身份证正面和背面照片；</p>
      <p>3、申请人银行卡正面和背面照片；</p>
      <p>4、申请人手持身份证和银行卡照片。</p>
      <p class="tipReg">{{ tipReg }}</p>
    </div>

    <!-- <a-button class="btn-next" type="primary" @click="doNext">确&nbsp;&nbsp;&nbsp;&nbsp;定</a-button> -->
    <a-button
      class="btn-next"
      type="primary"
      :loading="loading"
      @click="modalTrue"
      >确&nbsp;&nbsp;&nbsp;&nbsp;定</a-button
    >
    <a-modal
      style="top: 30vh"
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :closable="false"
      :maskClosable="false"
      :footer="null"
    >
      <div class="modal_div">
        <div class="modal_title">
          <h3>您还未设置“商户费率模板”</h3>
        </div>
        <p style="line-height: 30px; text-align: center">点击“确定”前往设置</p>
        <div class="footClass">
          <a-button
            type="primary"
            class="buttonClass"
            @click="clickhandleCancel"
            >确&emsp;定</a-button
          >
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import api from "@/common/api";

export default {
  data() {
    return {
      scroll1: false,
      scroll2: false,
      isshow: true,
      modalVisible: false,
      userType: "A",
      loading: false,
      tipReg: "",
    };
  },
  created() {
    this.getTipsReg();
  },
  mounted() {},
  methods: {
    //获取风险提示语
    getTipsReg() {
      api.getTips(
        "regMessage",
        (res) => {
          console.log(res);
          if (res.code == "OK") {
            this.tipReg = res.data;
          }
        },
        (err) => {}
      );
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`);
      this.userType = e.target.value;
      this.isshow = e.target.value == "A" ? true : false;
    },
    doNext() {
      // this.$router.push({ path: "/OrgRegister/step4", query: { userType: this.userType } });
      this.$router.push(`/OrgRegister/userType${this.userType}/step1`);
    },
    showtip() {
      this.$message.info("请阅读《支付服务协议》和《隐私权政策》");
    },
    handleOk(e) {
      setTimeout(() => {
        this.modalVisible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    modalTrue() {
      this.loading = true;
      sessionStorage.removeItem("orgAMemberNo");
      sessionStorage.removeItem("orgAMerchantName");
      sessionStorage.removeItem("orgBMemberNo");
      sessionStorage.removeItem("orgBMerchantName");
      console.log("this.loading", this.loading);
      this.getExistDataProduct();
    },
    getExistDataProduct() {
      let data = {};
      this.$axios.post("/agent/business/config/query/feeTemplate", data).then(
        (res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            this.loading = false;

            this.modalVisible = false;
            this.doNext();
          } else {
            this.modalVisible = true;
          }
        },
        (err) => {}
      );
    },
    clickhandleCancel() {
      this.modalVisible = false;
      this.$router.push("/org/transmanage/addnewrate/offline_merchant");
    },
    getFileDownload(value) {
      let data = value;
      api.getFilePath(
        data,
        (res) => {
          console.log(res);
          if (res.code == "OK") {
            const a = document.createElement("a");
            if (value == "merchant_service") {
              a.download = '"特约商户服务协议.pdf"';
            }
            let downloadUrl = "/file/file/download/" + res.data;
            a.href = downloadUrl;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
h4 {
  font-size: 18px;
  margin-bottom: 50px;
}

h5 {
  font-size: 16px;
  margin-bottom: 20px;
}

.content {
  text-align: center;
  height: 65vh;
}

.btn-next {
  margin-top: 20px;
  width: 120px;
}

.orgClass {
  width: 65%;
  margin: 8vh auto;
  margin-bottom: 4vh;
  text-align: left;
}

.orgClass p {
  margin-bottom: 1vh;
}

/deep/ .ant-radio-button-wrapper:first-child {
  border-radius: 4px;
}

/deep/.ant-radio-button-wrapper:last-child {
  border-radius: 4px;
}

.footClass {
  text-align: center;
}

.buttonClass {
  margin-top: 20px;
  width: 110px;
}

.modal_div {
  padding: 20px;
}

.modal_title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}

.modal_title p {
  margin-bottom: 5px;
}
.tipReg {
  color: red;
}
</style>